// 需求：Colors组件接收一个数组，例如：['red','blue','green']

import { Component } from 'react'

import PropTypes from 'prop-types'
// 2. 使用`组件名（函数名或类名）.propTypes = {}` 来给组件 List 的props添加校验规则
/**
 * props校验常用类型：
 * 1. 常见类型：array、bool、func、number、object、string
    2. React元素类型：element(jsx)
    3. 必填项：isRequired
    4. 特定结构的对象：shape({}) => 针对对象类型，做更加精细化的校验
 */

function Colors({ list }) {
  return (
    <div>
      <ul>
        {list.map((item) => (
          <li key={item} style={{ background: item, color: '#fff' }}>
            {item}
          </li>
        ))}
      </ul>
    </div>
  )
}
Colors.propTypes = {
  // 父传子属性名：数据类型
  list: PropTypes.array,
  // obj: PropTypes.object,
  a: PropTypes.number.isRequired,
  b: PropTypes.object,
  // 1. 只校验是一个对象
  // obj: PropTypes.object,
  // 2. 即校验是个对象也可以精细化校验对象内部属性值的类型
  obj: PropTypes.shape({
    a: PropTypes.number,
    b: PropTypes.string,
  }),
}
Colors.defaultProps = {
  a: 1,
}
class App extends Component {
  state = {
    list: ['red', 'blue', 'green'],
    list1: [],
  }
  render() {
    return (
      <div>
        <h1>props校验</h1>
        <hr />
        <Colors list={this.state.list} obj={{ a: 1, b: '2' }} />
      </div>
    )
  }
}
export default App
